<template>
	<view class="box">

		<!-- 到店信息 -->
		<view class="arrivalInfo" v-if="orderInfo">
			<view class="title" v-if="orderInfo.type==1">
				<span v-if="orderInfo.status==0">待支付</span>
				<span v-if="orderInfo.status==1">待发货</span>
				<span v-if="orderInfo.status==2">待收货</span>
				<span v-if="orderInfo.status==3">已完成</span>
				<span v-if="orderInfo.status==4">退款中</span>
				<span v-if="orderInfo.status==5">退款完成</span>
				<span v-if="orderInfo.status==-1">已取消</span>
				<span v-if="orderInfo.status==-2">拒绝退款</span>
			</view>
			<view class="title" v-if="orderInfo.type==2">
				<span v-if="orderInfo.status==0">待支付</span>
				<span v-if="orderInfo.status==1||orderInfo.status==2">待提货</span>
				<span v-if="orderInfo.status==3">已完成</span>
				<span v-if="orderInfo.status==4">退款中</span>
				<span v-if="orderInfo.status==5">退款完成</span>
				<span v-if="orderInfo.status==-1">已取消</span>
				<span v-if="orderInfo.status==-2">拒绝退款</span>
			</view>
			<view class="ctBox" v-if="orderInfo.delivery&&orderInfo.type==1">
				<view class="titleInfo">
					收货地址信息
				</view>
				<view class="user ct">
					<span>收货人:</span><span>{{orderInfo.delivery.contact_person}}
						{{orderInfo.delivery.contact_phone}}</span>
				</view>
				<view class="shopName ct">
					<span>{{orderInfo.delivery.address}}</span>
				</view>
			</view>
			<view class="ctBox" v-else>
				<view class="titleInfo">
					收货人信息
				</view>
				<view class="user ct">
					<span>提货人:</span><span>{{orderInfo.name}}
						{{orderInfo.phone}}</span>
				</view>
				
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="shopInfo" v-if="orderInfo">
			<view class="title">
				商品信息
			</view>
			<view class="ctBox" v-for="item in orderInfo.goods" :key="item.id">
				<view class="left">
					<image :src="item.goods_images_format[0]" mode="widthFix" style="width: 160rpx; height: 160rpx;">
					</image>
				</view>
				<view class="right">
					<view class="name">
						{{item.goods_name}}
					</view>
					<view class="name type">
						{{item.goods_type}}
					</view>
					<view class="type">
						<span>数量</span> <span>x{{item.goods_number}}</span>
					</view>
					<view class="price">
						￥{{item.goods_price}}
					</view>
				</view>
			</view>
			<view class="totalPrice">
				<span>商品总价</span> <span>￥{{orderInfo.total_amount}}</span>
			</view>
			<view class="totalPrice">
				<span>配送费</span> <span>￥{{orderInfo.express_fee}}</span>
			</view>
			<view class="totalPrice" v-if="orderInfo.coupon_amount>0">
				<span>优惠券抵扣</span> <span>-￥{{orderInfo.coupon_amount}}</span>
			</view>
			<view class="confirmPrice">
				<span>￥{{orderInfo.pay_amount}}</span> <span>合计：</span> <span>共{{orderInfo.goods.length}}件</span>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="orderInfo" v-if="orderInfo">
			<view class="title">
				订单信息
			</view>
			<view class="number ct">
				订单编号：{{orderInfo.order_no}}
			</view>
			<view class="createTime ct">
				创建时间：{{orderInfo.created_at}}
			</view>
			<view class="createTime ct" v-if="orderInfo.pay_time">
				支付时间：{{orderInfo.pay_time}}
			</view>
			<view class="remark ct" v-if="orderInfo.type">
				订单类型：<span v-if="orderInfo.type==1">商家配送</span><span v-if="orderInfo.type==2">用户自提</span>
			</view>

			<view class="remark ct">
				订单备注：{{orderInfo.remark||"无"}}
			</view>

		</view>
		<!-- 按钮 待付款-->
		<view class="btns" v-if="orderInfo.status==0">
			<view class="instant" @click="onOrderPayment(orderInfo.order_no)">
				立即支付
			</view>
			<view class="cancel" v-if="orderInfo.status==0" @click="cancelOrder(orderInfo.id)">
				取消订单
			</view>
		</view>
		<!-- 按钮 待提货-->
		<view class="btns" v-if="orderInfo.status==1">

			<view class="realtaions">
				联系商家
			</view>
		</view>
		<!-- 按钮 待付款-->
		<view class="btns" v-if="orderInfo.status==2">
			<view class="commit" @click="affirmOrder(orderInfo.id)">
				确认收货
			</view>
			<view class="realtaions">
				联系商家
			</view>
		</view>
		<view class="hhh" style="height: 100rpx;">

		</view>

	</view>
</template>

<script>
	import {
		getorderInfo,
		getWechatPay,
		cancelOrderId,
		confirmOrderId
	} from '@/api/user.js'
	export default {
		data() {
			return {
				type: 2,
				// 订单详情
				orderInfo: ""

			}
		},
		onLoad(res) {
			console.log(res);
			this.getData(res.id)
		},
		methods: {
			getData(id) {
				getorderInfo(id).then((res) => {
					console.log(res);
					this.orderInfo = {
						...res.data,
						goods:res.data.goods.map(item=>{
							return{
								...item,
								goods_images_format:item.goods_skus? [item.goods_sku_cover_format]:item.goods_images_format,
								goods_price:item.goods_skus?item.goods_sku_price:item.goods_price,
								goods_type:item.goods_skus?"类型:"+JSON.parse(item.goods_skus)[0].name:""
							}
							
						})
						
					}
				})
			},
			cancelOrder(id) {
				let that = this;
				cancelOrderId({
					order_id: id
				}).then(res => {
					that.getOrderList(that.page, that.current - 1);
				})
			},
			// 确认收货
			affirmOrder(id) {
				let that = this;
				confirmOrderId({
					order_id: id
				}).then(res => {
					toast('确认收货');
					that.getOrderList(that.page, that.current - 1);
				})
			},

			// 支付
			onOrderPayment(no) {
				let self = this;
				getWechatPay({
					order_no: no
				}).then(res => {
					// self.onPayment("wxpay", res.data);
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: 'MD5',
						paySign: res.data.paySign,
						success: function(res) {
							// success && success(res.data);
							toast('支付成功');
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 500);
						},
						fail: function(err) {
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000
							});
							// fail && fail(err.data);
						},
						complete(ress) {
							// complete && complete(ress.data);
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 1rpx;
		background-color: #f5f5f5;
	}

	//到店信息
	.arrivalInfo {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 20rpx auto;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		.title {

			font-size: 42rpx;
		}
		

		.ctBox .titleInfo {
			margin-top: 20rpx;
			font-size: 30rpx;
		}

		.ctBox .ct {
			margin-top: 10rpx;
			font-size: 28rpx;
		}

		.ctBox .addressInfo {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			justify-content: space-between;

			.text {
				width: 594rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.openDtIcon {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				background-image: url('/static/dhd.png');
				background-size: cover;
				background-repeat: no-repeat;
			}

			.dwIcon {
				display: inline-block;
				width: 20rpx;
				height: 24rpx;
				background-image: url('/static/location2.png');
				background-size: cover;
				background-repeat: no-repeat;
			}

		}

		.codeBox {
			padding: 20rpx 0;
			border-top: 1rpx solid #E6E6E6;
			text-align: center;

			.title {
				font-size: 28rpx;
				padding: 10rpx 0;
			}

			.code {
				font-size: 60rpx;
				padding: 10rpx 0;
			}

			.codePic {
				width: 300rpx;
				height: 300rpx;
				margin: 10rpx auto;
			}

			.notice {
				font-size: 24rpx;
				padding: 10rpx 0;
				color: #D3BA5B;
			}
		}
	}

	//商品信息
	.shopInfo {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 20rpx auto;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		.title {
			font-size: 30rpx;
		}

		.ctBox {
			display: flex;
			justify-content: space-between;
			padding: 0 0 20rpx 0;
			margin-top: 30rpx;
			

			.left {
				width: 160rpx;
				height: 160rpx;
			}

			.right {
				width: 500rpx;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

			}

			.right .name {
				font-size: 26rpx;
				width: 500rpx;
				height: 53rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.right .type{
				font-size: 22rpx;
				color: #666;
			}

			.right .type {
				display: flex;
				width: 500rpx;
				justify-content: space-between;
				height: 53rpx;
				color: #999999;
			}

			.right .price {
				width: 500rpx;
				font-size: 30rpx;
				color: #FA453C;
				height: 53rpx;
			}

		}

		.totalPrice {
			width: 670rpx;
			padding: 20rpx 0;
			display: flex;
			font-size: 28rpx;
			border-top: 1px solid #F0F1F2;
		}

		.confirmPrice {
			display: flex;
			padding: 20rpx 0;
			flex-direction: row-reverse;
			border-top: 1px solid #F0F1F2;

			span {
				margin: 0 8rpx;
			}
		}

	}

	// 订单信息
	.orderInfo {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin: 20rpx auto;

		.ct {
			padding: 10rpx 0;
			font-size: 30rpx;
		}

	}

	//按钮
	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -3rpx 10rpx 0rpx rgba(153, 153, 153, 0.1);
		box-sizing: border-box;
		padding: 0 20rpx;
		text-align: center;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		line-height: 60rpx;

		.instant {

			width: 150rpx;
			height: 60rpx;
			background: #fc562f;
			border-radius: 30rpx;
			color: #fff;
		}

		.cancel {
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #E6E6E6;
			border-radius: 30rpx;
			color: #333333;
			margin: 0 60rpx;
		}

		.realtaions {
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #E6E6E6;
			border-radius: 30rpx;
			color: #666;
			margin: 0 60rpx;
		}

		.commit {
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #fc562f;
			border-radius: 30rpx;
			color: #fc562f;
		}
	}

	// 弹出

	.popCommit {
		width: 750rpx;
		height: 900rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-sizing: border-box;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		padding: 10rpx 20rpx;

		.titles {
			font-size: 36rpx;
			text-align: center;
			padding: 10rpx 0 20rpx 0;
			border-bottom: 1rpx solid #e6e6e6;
		}

		.rates {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e6e6e6;
			font-size: 28rpx;

			.rateTitle {
				width: 120rpx;
			}

			.reateSelet {
				width: 400rpx;
			}

			.rateCt {
				width: 80rpx;
			}
		}

		.commentCt {
			border-bottom: 1rpx solid #e6e6e6;

			.title {
				padding: 20rpx 0;
			}

			.Ct {
				width: 650rpx;
				height: 150rpx;
				overflow: hidden;
			}

			.picS {
				display: flex;
				align-items: center;
			}

			.picS .item {
				width: 200rpx;
				height: 200rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				overflow: hidden;
				margin: 40rpx 40rpx 40rpx 0;
			}

		}

		.submitBtn {
			width: 690rpx;
			height: 80rpx;
			background: #fc562f;
			border-radius: 40rpx;
			text-align: center;
			margin: 40rpx auto;
			line-height: 80rpx;
			color: #fff;
		}
	}
</style>